<style lang="scss" scoped>
@import '../../styles/common/loading.less';
.container{
    border: none !important;
    margin-top: 4px;
}
.el-col-offset-1 {
    margin-left: 0%;
}
.button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

}
.col_a {
    margin-left: 2%;
}
.el-card {
    height: 200px;
}

.el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
}
</style>
<template>
    <!-- 发起调查详情页面 -->
    <div    class="common-background-color"
            v-loading="loading"
            element-loading-text="loading......"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="width:98%;height:100%;margin: 6px 12px;">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="调查信息"  name="1">
                    <!-- 基本信息 -->
                    <template>
                        <el-form :model="form" ref="form" class="info-submit-form">
                            <el-row type="flex">
                                <el-col :span="8" >
                                    <el-form-item label="大病赔案号" >
                                        <el-input  v-model="form.caseNo"  disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" >
                                    <el-form-item label="保单号" >
                                        <el-input  v-model="form.policyNo" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" >
                                    <el-form-item label="被保险人" >
                                        <el-input  v-model="form.insuredName" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row type="flex">
                                <el-col :span="8" >
                                    <el-form-item label="社/医保号" >
                                        <el-input  v-model="form.medicalInsuranceNo" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" >
                                    <el-form-item label="证件号" >
                                        <el-input  v-model="form.documentNo" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" >
                                    <el-form-item label="调查原因" :rules="[{ required: true, message: '调查原因不能为空', trigger: 'change' },]" prop="surveyReason">
                                        <el-select  placeholder="请选择" v-model="form.surveyReason">
                                            <el-option
                                                v-for="item in surveyTypeList"
                                                :key="item.codeCode"
                                                :label="item.codeCName"
                                                :value="item.codeCode">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row type="flex">
                                <el-col :span="24">
                                    <el-form-item label="调查详情">
                                        <el-input type="textarea" v-model="form.surveyDescribe"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </template>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div style="margin-top: 25px;text-align: center;height: 70px">
            <el-button type="primary" size="medium" style="width: 9%" @click="save('form')">提 交</el-button>
            <el-button type="primary" size="medium" style="width: 9%" @click="closePage">关 闭</el-button>
        </div>
        <el-dialog
            :visible.sync="Successdialog"
            :show-close="false"
            :close-on-click-modal="true"
            :close-on-press-escape="false"
            width="20%"
            center>
            <div style="margin-top: -35px;">
            <div>| 调查任务申请</div>
            <hr style="width: 80%;margin-left: 1px">
            </div>
            <div v-if="this.item1===0" style="text-align: center;margin-top: 20px">
            <img src="../../assets/images/pass.png" width="60">
            <div style="margin-top: 10px">{{this.message}}</div>
            </div>
            <div v-if="this.item1===1" style="text-align: center;margin-top: 20px">
            <img src="../../assets/images/notPass.png" width="60">
            <div style="margin-top: 10px">提交失败</div>
            </div>
            <div style="margin-top: 15px;text-align: center"><span style="font-size: x-large">{{time}}</span>秒后跳转到上一个页面</div>
            <div slot="footer" class="dialog-footer">
            <el-button @click="closePage" type="text">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { queryCodeList, saveCaseSurvey } from "@/api/baseDate";
// import Cookies from "js-cookie";
export default {
    name: "surveyTaskApplyDetail",
    data() {
        return {
            loading: false,
            surveyTypeList: [],
            Successdialog: false,
            activeNames: ["1", "2"],
            form: {
                handleComrCode: '',
                handleComrName: '',
                handlerName: '',
                handlerCode: '',
            },
            researchHistory: [],
            time: 0,
            item1: 0,
            message: "",
        }
    },
    created() {
        this.form = JSON.parse(this.$route.query.sponsorSurvey);
        this.querySurveyType();
    },
    methods: {
        // 调查原因
        querySurveyType() {
            var data = {
              codeType: "SurveyType",
            };
            queryCodeList(data).then((res) => {
                this.surveyTypeList = res.data;
            });
        },
        save(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var data = {
                        ...this.form,
                        // handleComrCode: Cookies.get("makeCom"),
                        // handleComrName: Cookies.get("cMakeCom"),
                        // handlerName: Cookies.get("userName"),
                        // handlerCode: Cookies.get("userCode"),
                    };
                    // 禁止重复点击
                    if(this.loading){
                        return;
                    }
                    this.loading = true;
                    saveCaseSurvey(data)
                        .then((res) => {
                            this.loading = false;
                            this.message = res.data.resultMsg;
                            this.Successdialog = true;
                            // 把time改为5
                            this.time = 5;
                            // 设定一个定时器，每一秒调用一次coundDown方法，time-1
                            setInterval(this.countDown, 1000);
                        }).catch(function () {
                            /*let THIS = this;*/
                            (this.item = 1), (this.Successdialog = true);
                            // 把time改为5
                            this.time = 5;
                            // 设定一个定时器，每一秒调用一次coundDown方法，time-1
                            setInterval(this.countDown, 1000);
                        });

                } else {
                    return false;
                }
            })
        },
        // 关闭
        closePage() {
            this.Successdialog = false;
            this.closePageTo(this.$store,this.$route,this.$router,"surveyTaskApply");
        },
        countDown() {
            this.time--;
        }
    },
    watch: {
        // 监听time的值
        time: function (newVal) {
            if (newVal == 0) {
                this.Successdialog = false;
                this.closePageTo(this.$store,this.$route,this.$router,"surveyTaskApply");
            }
        }
    }
}
</script>